{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" href="{% static "/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css" %}">
</head>
<body>

<div class="card text-center shadow p-3 mb-5 bg-white rounded"
     style="width: 20%; position: absolute;left:50%;top: 50%;transform: translate(-50%,-50%)">
    <div class="card-header bg-white">
        <h3>管理系统</h3>
    </div>
    <div class="card-body">
        <form method="post" novalidate>
            {% csrf_token %}

            <p class="card-title float-left">{{ form.username.label }}:</p>
            {{ form.username }}
            <p class="card-title" style="color: red">{{ form.username.errors.0 }}</p>

            <p class="card-title float-left">{{ form.password.label }}:</p>
            {{ form.password }}
            <p class="card-title" style="color: red">{{ form.password.errors.0 }}</p>
            <p class="card-title float-left">{{ form.captcha.label }}:</p>

            <div style="clear: both">
                <div style="width: 60%" class="float-left">
                    {{ form.captcha }}
                </div>
                {#暂时点击图片刷新整个页面，未使用ajax#}
                <a style="width: 40%" href="/login/"><img src="{% static '/img/captcha.png' %}"></a>
                <p class="card-title" style="color: red">{{ form.captcha.errors.0 }}</p>
            </div>
            <button class="btn btn-primary" type="submit">登录</button>
        </form>
    </div>
    <div class="card-footer text-muted bg-white">
        账户：admin 密码：admin
    </div>
</div>
<script src="{% static "/js/jquery-3.7.1.min.js" %}"></script>
<script src="{% static "/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js" %}"></script>
</body>
</html>
